<template>
    <MpMaterialNewsPreviewEdit v-loading="dataInitLoading"
                               :news-item="localNewsItem"
                               :show-add-button="false"
                               ref="newsPreviewEdit"
                               :thumb-media-id-upload-url="thumbMediaIdUploadUrl()"
                               v-on:currentItemChange="currentItemChange">

        <template #formButtons>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('保存当前图文项')" :disabled="selectedItem.index ==null"
                       @click="saveCurrentNews" size="mini">保存当前图文项
            </el-button>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('将当前图文项更新到微信服务器')" :disabled="selectedItem.index ==null"
                       @click="updateCurrentNewsToWxServer" size="mini" :loading="syncToWxServerLoading">将当前图文项更新到微信服务器
            </el-button>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('重置')"
                       @click="()=>{$refs.newsPreviewEdit.getFormEdit().resetForm()}" size="mini">重置
            </el-button>
        </template>
    </MpMaterialNewsPreviewEdit>
</template>

<script>
    import MpMaterialNewsPreviewEdit from '../../../components/mp/MpMaterialNewsPreviewEdit.vue'
    import MpUrl from '../../MpUrl.js'
    export default {
        components:{
            MpMaterialNewsPreviewEdit
        },
        props:{

        },
        data(){
            return {
                appCode: this.$route.query.appCode,
                mediaId: this.$route.params.mediaId,
                dataInitLoading: false,
                addToWxServerLoading: false,
                localNewsItem: null,
                selectedItem:{
                    index: null,
                    item: null
                },
                syncToWxServerLoading:  false
            }
        },
        mounted() {
            if (!this.appCode) {
                this.$message.error('参数错误，请传appCode')
            }else{
                this.dataInit()
            }
        },
        methods:{
            thumbMediaIdUploadUrl(){
                let type = 'image'
                if (!this.appCode) {
                    return false
                }
                return this.$stStringTools.replaceb(MpUrl.materialUpload,{appCode : this.appCode,type: type})
            },
            currentItemChange(val){
                this.selectedItem = val
            },
            getNewsItem(){
                return this.$refs.newsPreviewEdit.getNewsItem()
            },
            saveCurrentNews() {
                this.$refs.newsPreviewEdit.saveCurrentNews()
            },
            dataInit(){
                this.dataInitLoading = true
                this.axios.get(this.$stStringTools.replaceb(MpUrl.PermanentNewsGetByMediaId,{appCode: this.appCode,mediaId: this.mediaId}) )
                    .then(res=>{
                        this.localNewsItem = res.data.articles
                    }).catch(error=>{
                    if(error.response){
                        if(error.response.data && error.response.data.errorMsg){
                            this.$message.error(error.response.data.errorMsg)
                        }

                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.dataInitLoading = false
                })
            },
            // 添加到微信服务器
            updateCurrentNewsToWxServer(){

                let param = {
                    mediaId: this.mediaId,
                    index: this.selectedItem.index,
                    articles: this.selectedItem.item
                }
                this.syncToWxServerLoading = true
                this.axios.put(this.$stStringTools.replaceb(MpUrl.PermanentNewsUpdate,{appCode: this.appCode}),param)
                    .then(res=>{
                        this.$message.success('恭喜更新同步成功')
                    }).catch(error=>{
                    if(error.response){
                        if(error.response.data && error.response.data.errorMsg){
                            if(error.response.status != 401){
                                this.$message.error(error.response.data.errorMsg + ' 请确认当前图文项已保存')
                            }else{
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }

                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.syncToWxServerLoading = false
                })
            },
        },
        watch:{
        }
    }
</script>

<style scoped>

</style>